<template>
  <div class='wrap'>
    <div class='container '>
       <!-- 左侧固定区域 -->
      <div class="fixed">
        <div @click="clickDianZan">
          <el-badge :value="article.like_count" :max="999" class="item ">
            <i class="iconfont icon-dianzan " :class="{ 'is-highlight': isDianZan }" ></i>
          </el-badge>
        </div>
        <div @click="clickPingLun">
          <el-badge :value="article.comment_count" :max="999" class="item">
            <i class="iconfont icon-pinglun" ></i>
          </el-badge>
        </div>
        <div @click="clickShouCang">
          <i class="iconfont icon-shoucang" :class="{ 'is-highlight': isShouCang }"></i>
        </div>
        <div>
          <i class="iconfont icon-fenxiang"></i>
        </div>
        <div @click="showAccusation=true">
          <i class="iconfont icon-gengduo"></i>
        </div>
      </div>
       <!-- 举报文章组件 -->
    <Report v-if="showAccusation" :showAccusation="showAccusation" :articleId="article.id" @showAccusation="showAccusation = false"/>
      <!-- 评论抽屉组件 -->
      <DrawerComment v-if="article.id && showDrawerComment" :article_id="article.id" :drawer="showDrawerComment" @close="showDrawerComment = false"  @refresh="refresh"></DrawerComment>
    </div>
   </div>
</template>

<script>
import DrawerComment from '@/views/drawerComment' // 评论抽屉组件
import Report from '@/views/Report' // 举报文章组件
import { getArticleLikingsId, addArticleCollections, deleteArticleCollections, getArticleCollectionsId, deleteArticleLikings, addArticleLikings } from '@/api/article'
export default {
  name: 'Suspension',
  components: { DrawerComment, Report },
  props: ['article'],
  data () {
    return {
      isDianZan: false, // 是否对文章点过赞
      isShouCang: false, // 是否收藏过该文章
      showDrawerComment: false, // 是否显示评论抽屉组件
      showAccusation: false // 是否显示举报对话框
    }
  },
  created () {
    if (this.$route.params.article_id) {
      this.isShouCangg(this.$route.params.article_id)
      this.getArticleLikingsId(this.$route.params.article_id)
    }
  },
  methods: {
    // 通知父组件刷新 重新获取文章数据
    refresh () {
      this.$emit('refresh')
    },
    // 根据文章id获取文章点赞信息
    async getArticleLikingsId (id) {
      try {
        const res = await getArticleLikingsId(id)
        if (res) {
          this.isDianZan = true
        }
      } catch (error) {
        this.isDianZan = false
      }
    },
    // 是否收藏过该篇文章
    async isShouCangg (id) {
      const res = await getArticleCollectionsId(id)
      if (res) {
        this.isShouCang = true
      }
    },
    // 点击收藏文章
    async clickShouCang () {
      if (this.isShouCang == false) {
        this.$message.success('已收藏该篇文章')
        const res = await addArticleCollections({ article_id: this.$route.params.article_id })
        if (res) {
          this.isShouCang = true
        }
      } else {
        this.$message.info('已取消收藏该篇文章')
        await deleteArticleCollections(this.$route.params.article_id)
        this.isShouCang = false
      }
    },
    clickPingLun () {
      this.showDrawerComment = !this.showDrawerComment
    },
    // 对文章点赞  // 取消对文章点赞
    async clickDianZan () {
      if (this.isDianZan == false) {
        await addArticleLikings({ article_id: this.$route.params.article_id })
        this.isDianZan = true
        // 调用父亲方法刷新文章数据
        this.refresh()
      } else {
        await deleteArticleLikings(this.$route.params.article_id)
        this.isDianZan = false
        // 调用父亲方法刷新文章数据
        this.refresh()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
 // 固定左侧
    .fixed {
      position: fixed;
      margin-left: -7rem;
      top: 200px;
      // z-index: 2;
      height: 100px;
      bottom: 50px;
      ::v-deep .el-badge__content.is-fixed {
        position: absolute;
        top: 11px;
        right: 10px;
        font-weight: 500;
        -webkit-transform: translateY(-50%) translateX(100%);
        transform: translateY(-50%) translateX(100%);
      }

      ::v-deep .el-badge__content {
        background-color: #c2c8d1;
        border-radius: 10px;
        color: #fff;
        display: inline-block;
        font-size: 12px;
        height: 18px;
        line-height: 18px;
        padding: 0 5px;
        text-align: center;
        white-space: nowrap;
        border: 0px solid #fff;
      }

      div {
        margin-bottom: 20px;
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 4%);
        cursor: pointer;
        .is-highlight:hover{
          // color: #8397ac !important;
          color: #66B1FF !important;
        }
        .is-highlight{
          color: #409EFF !important;
        }
        .iconfont:hover {
          color: #686d6d;
        }
        .iconfont {
          font-size: 22px;
          //  background-color: #9883e2;
          color: #9ea0a0;
        }
      }
    }
</style>
